<template>
    <div class="msj_spellstate">
        <div style="width: 100%; display: flex; justify-content: space-between; padding: 10px 0 20px;">
            <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
        <div>
        <el-input v-model="input" placeholder="请输入关键词" :keyup="input=input.replace(/[^\w\u4E00-\u9FA5]/g, '')" style="width: 200px;"></el-input>
        <el-button @click="onsearch">搜索</el-button>
      </div>
        </div>
        <!-- 商品状态管理列表 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tabs"  :key="index" :label="item.label" :name="item.name">
        <el-table
    :data="tabbledata"
    border
    height="400"
    style="width: 100%">
    <el-table-column
      label="拼团药品"
      width="260">
      <template slot-scope="scope">
        <div class="msj_pinshops_info">
          <div class="msj_pinshops_img">
            <img :src="scope.row.spinfos.img" alt="">
          </div>
          <span>{{ scope.row.spinfos.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="购买价格"
      width="200">
      <template slot-scope="scope">
          <span>￥{{ scope.row.goumprice }}</span>
      </template>
    </el-table-column>
    <el-table-column
    prop="pinnums"
      width="200"
      label="拼团人数">
    </el-table-column>
    <el-table-column
    prop="state"
    width="200"
      label="状态">
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <div >
            <el-button @click="handlesClick(scope.row)" type="text" size="small">查看订单详情</el-button>
        </div>      
      </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
        </el-tabs>
    <div style="width: 100%; display: flex; justify-content: flex-end; padding: 10px 0;">
        <el-pagination
  background
  @current-change="handleCurrentChange"
  :page-size="pageSize"
  :current-page="currentPage"
  layout="prev, pager, next"
  :total="totals">
</el-pagination>
    </div>
    </div>
</template>

<script>
import {getmsjpinspstate} from '@/utils/api'
export default {
    name: 'PhaemacySpellstate',

    data() {
        return {
            value1: '',
            input:'',
            pageSize:3,
            currentPage:1,
            curr:0,
            activeName: '1',
            tabs:[
                {
                    name:'1',
                    label:'全部',
                    names:'全部'
                },
                {
                    name:'2',
                    label:'拼团成功',
                    names:'拼团成功'
                },
                {
                    name:'3',
                    label:'拼团失败',
                    names:'拼团失败'
                },
                {
                    name:'4',
                    label:'全部拼团',
                    names:'全部拼团'
                },
            ],
            totals:0,
            tabbledata:[]
        };
    },
    created(){
        this.getspstates()
    },
    mounted() {
        
    },

    methods: {
        getspstates(){
            getmsjpinspstate().then(res=>{
               let data=res.data.data.map(v=>{
                    v.spinfos=JSON.parse(v.spinfos)
                    return v
               })
               let data1
               if((this.value1==''||this.value1==null)&&this.input==''){
                    data1=data
               }else{
                   this.value1=this.value1?this.value1.map(v=>{
                        v=Number(v)
                        return v
                   }):this.value1
                  if((this.value1!=''&&this.value1!=null)&&this.input!=''){
                    data1=data.filter(v=>{
                        let t=Number(new Date(`${v.ddtimes.split(' ')[0]} 00:00:00`))
                        return v.spinfos.name.includes(this.input)&&t>=this.value1[0]&&t<=this.value1[1]
                    })
                  }else{
                    data1=data.filter(v=>{
                        let t=Number(new Date(`${v.ddtimes.split(' ')[0]} 00:00:00`))
                        return this.input?v.spinfos.name.includes(this.input):t>=this.value1[0]&&t<=this.value1[1]
                    })
                  }  
               }
               this.tabs[0].tablist=data1
                this.tabs[1].tablist=data1.filter(v=>v.state=='成功')
                this.tabs[2].tablist=data1.filter(v=>v.state=='失败')
                this.tabs[3].tablist=data1
                this.tabs=this.tabs.map((v,i)=>{
                    if(i>0){
                        v.label=`${v.names} (${v.tablist.length})`
                    }
                    return v
                })
                this.fenye(this.tabs[this.curr].tablist)    
             })
        },
        fenye(v){
            this.totals=v.length
            let arr=JSON.parse(JSON.stringify(v))
            let start=(this.currentPage-1)*this.pageSize
            this.tabbledata=arr.splice(start,this.pageSize)
        },
        handleClick(tab, event) {
            // console.log();
            this.curr=tab.index
            this.currentPage=1
            this.fenye(this.tabs[this.curr].tablist)
        },
        handlesClick(v){
            this.$router.push({
                name:'spellstatedetail',
                params:v
            })
            sessionStorage.setItem('spellmsjstates',JSON.stringify(v))
        },
        // 搜索
        onsearch(){
          this.getspstates()
        },
        // 切换页数
        handleCurrentChange(val){
            this.currentPage=val
            this.fenye(this.tabs[this.curr].tablist)
        }
    },
};
</script>

<style  scoped>
*{
    margin: 0;
}
    .msj_spellstate{
        width: 100%;
    }
    .msj_pinshops_info{
        display: flex;
        width: 100%; font-size: 13px; align-items: center;
        justify-content: space-between;
    }
    .msj_pinshops_img{

    }
    .msj_pinshops_img img{
        width: 60px;
    }
</style>